<template>
  <!-- 详情页商品详细信息组件 -->
  <div v-if="Object.keys(detailInfo).length != 0" class="goods2-info">
    <div class="info-desc clear-fix">
      <div class="start"></div>
      <div class="desc">{{detailInfo.desc}}</div>
      <div class="end"></div>
    </div>
    <div class="info-key">
      {{ detailInfo.detailImage[0].key }}
    </div>
    <div class="info-image">
      <img
        v-for="(item, index) in detailInfo.detailImage[0].list"
        :src="item"
        alt="穿着图片"
        :key="index"
        @load="imgLoad"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    detailInfo: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
      return {
          counter: 0,
          imagesLength:0
      }
  },
  watch: {
    //   detailInfo发生改变的时候 执行这个函数
      detailInfo(newvalue,oldvalue) {
        //  记录获取图片的总数
        this.imagesLength = this.detailInfo.detailImage[0].list.length
      }
  },
  methods: {

      // 所有图片加载完成之后，refresh一次
      imgLoad() {
        this.counter++;
        if(this.counter === this.imagesLength){
            this.$emit('imgLoad')
            console.log('商品详情图片加载完成 并且成功发送刷新事件');
        }
      }
  },
};
</script>

<style>
.goods2-info {
  padding: 20px 0;
  border-bottom: 5px solid #f2f5f8;
}
.info-desc {
  padding: 0 15px;
}
.start,
.end {
  width: 90px;
  height: 1px;
  background-color: #a3a3a5;
  position: relative;
}
.info-desc .start {
  float: left;
}
.info-desc .end {
  float: right;
}
.info-desc .start::before,
.info-desc .end::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: #333;
}
.info-desc .desc {
  padding: 15px 0;
  font-size: 14px;
}

.info-key {
  margin: 10px 0 10px 15px;
  color: #333;
  font-size: 15px;
  text-align:  center;
}
 .info-image img {
    width: 100%;
  }
</style>
